<template>
  <div class='index'>

    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="(`http://127.0.0.1:8080${item.imgSrc}`)" class="swiper-img" />
      </van-swipe-item>
    </van-swipe>
    <searchHeader></searchHeader>
    <!-- 导航栏 -->
    <van-row type="flex" justify="space-around" class="nav">
      <van-col span="6">
        <img src="../../assets/images/nav-1.png" class="nav-img" />
        <h4>整租</h4>
      </van-col>
      <van-col span="6">
        <img src="../../assets/images/nav-2.png" class="nav-img" />
        <h4>合租</h4>
      </van-col>
      <van-col span="6">
        <img src="../../assets/images/nav-3.png" class="nav-img" />

        <h4>地图找房</h4>
      </van-col>
      <van-col span="6">
        <img src="../../assets/images/nav-4.png" class="nav-img" />

        <h4>去出租</h4>
      </van-col>
    </van-row>
    <!-- 租房小组 -->
    <div class="group">
      <h3 class="group-title">
        租房小组
        <span class="more">更多</span>
      </h3>
         <van-grid :column-num="2" direction="horizontal" :border="false">
           <van-grid-item v-for="item in groupsList" :key="item.id" class="group-item">
              <div class="desc">
                    <p class="title">{{item.title}}</p>
                    <span class="info">{{item.desc}}</span>
                </div>
                <img :src='(`http://localhost:8080${item.imgSrc}`)' alt="" />
           </van-grid-item>

         </van-grid>
    </div>
    <!-- 最新资讯 -->
    <div class="news">
        <h3 class="group-title">最新资讯</h3>
       <van-grid :column-num="1" class="news-item" direction="horizontal">
         <van-grid-item  v-for="item in newsList" :key='item.id' >
             <div class="imgwrap">
                <img
                  class="img"
                  :src='(`http://localhost:8080${item.imgSrc}`)'
                  alt=""
                  />
             </div>

              <div class="content" >
                  <h3 class="title">{{item.title}}</h3>
              <div class="info" >
                  <span>{{item.from}}</span>
                  <span>{{item.date}}</span>
              </div>
            </div>
        </van-grid-item>

     </van-grid>
    </div>

  </div>
</template>

<script>
import searchHeader from '../searchHeader/searchHeader'
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      // 租房小组的数据
      groupsList: [],
      // 新闻资讯的数据
      newsList: []
    }
  },
  created() {
    // 调用获取轮播图的方法
    this.getSwiper()
    // 调用获取租房小组的方法
    this.getGroups()
    // 调用新闻资讯的方法
    this.getNews()
  },
  methods: {
    // 获取轮播图数据
    async getSwiper() {
      const { data: res } = await this.$http.get('/home/swiper')
      this.swiperList = res.body
    },
    // 获取租房小组的数据
    async getGroups() {
      const { data: res } = await this.$http.get('/home/groups?area=AREA%7C88cff55c-aaa4-e2e0')
      console.log(res)
      this.groupsList = res.body
    },
    // 获取新闻资讯的数据
    async getNews() {
      const { data: res } = await this.$http.get('/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
      console.log(res)
      this.newsList = res.body
      // 判断返回的状态是否成功
      if (res.status !== 200) {
        console.error(res.description)
      }
    }

  },
  components: {
    searchHeader
  }

}
</script>

 <style lang="less" scoped>
 .index{
   padding-bottom:50px;
 }
// 轮播图样式
.my-swipe {
  font-size: 12px;
  height: 212px;
  width: 375px;
  overflow: hidden;
}

.swiper-img {
  width: 375px;
  height: 212px;
}
// 导航栏样式
.nav {
  text-align: center;
  margin-top: 15px;
}
.nav-img {
  width: 48px;
  height: 48px;
}

.nav h4 {
  font-weight: normal;
  font-size: 14px;
  margin: 0;
  padding: 0;
}
.van-col{
  margin-bottom: 12px;
}
// 租房小组的样式
.group {
  background-color: #f6f5f6;
  overflow: hidden;
  padding: 0 10px;
  .group-title {
    position: relative;
    margin: 15px 0px 15px 10px;
    font-size: 15px;

    .more {
      color: #787d82;
      position: absolute;
      right: 0;
      font-size: 14px;
      font-weight: normal;
    }
  }
    .group-item {
        height: 75px;
        display: flex;
        justify-content: space-around;
        margin-bottom: 15px;

        .desc {
            .title {
                font-weight: bold;
                font-size: 13px;
                margin:0 15px 10px 15px;

            }
            .info {
                font-size: 12px;
                color: #999;
                margin:0 15px 10px 15px;
            }
        }
        img {
            width: 55px;
        }
    }

}
// 最新资讯：
.news {
    padding: 10px;
    background-color: #fff;

    .group-title {
      margin: 10px 0 5px 10px;
      font-size: 15px;
    }

    .news-item {

      padding: 15px 10px 15px 0;
      border-bottom: 1px solid #e5e5e5;
    }

    .news-item:last-child {
      border: 0;
    }

    .imgwrap {
      float: left;
      height: 90px;
      width: 120px;
    }

    .img {
      height: 90px;
      width: 120px;
    }

    .content {
      overflow: hidden;
      height: 100%;
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title {
      margin-bottom: 15px;
      font-size: 14px;
    }

    .info {
      width: 100%;
      color: #9c9fa1;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }

    .message-title {
      margin-bottom: 48px;
    }
  }
</style>
